<template>
  <div class="risk">
    <div class="add">
      <eagle-uploader
        :max-count="2"
        :after-read="afterRead"
      >
        上传
      </eagle-uploader>
    </div>
    <eagle-list :allowSearch="false" :showTab="false" :finished="finished">
      <van-cell v-for="(item, index) in list" :key="index">
        <van-row class="">
          <van-col span="4" type="flex">
            <eagle-image-preview class="mt-10" :images="item.Url"></eagle-image-preview>
          </van-col>
          <van-col span="18" type="flex">
            <van-field
              autosize=""
              type="textarea"
              v-model="item.Remarks"
              rows="3"
              placeholder="请输入图片说明"
            ></van-field>
          </van-col>
          <van-col span="2" type="flex">
            <div class="mt-10">
              <div>
                <van-icon name="arrow-up" @click="up(index)" />
              </div>
              <div><van-icon name="cross" @click="handleDelete(index)" /></div>
            </div>
          </van-col>
        </van-row>
      </van-cell>
    </eagle-list>
    <div class="btns m-10">
      <van-button type="warning" class="delete-btn" @click="submit()">
        保存
      </van-button>
    </div>
  </div>
</template>

<script>
import { getFileList, savePhotos } from "@/api/OtherdangerCheckTask";
import { upload } from "@/api/common";
export default {
  data() {
    return {
      active: 0,
      value: "",
      list: [],
      selectKey: "",
      id : this.$route.query.id,
      filter: {
        type: this.$route.query.type,
        ctCode: this.$route.query.ctCode,
      },
      baseUrl: process.env.VUE_APP_BASE_API,
      loading: false,
      finished: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      getFileList(this.filter).then((res) => {
        this.loading = false;
        this.finished = true;

        this.list = res.data;
      });
    },

    handleDelete(idx) {
      this.list.splice(idx, 1);
    },

    // 设备详情
    goDetail(item) {
      this.$router.push({
        path: "/OtherDanger/DangerCheckTaskEdit",
        query: { id: item.ID },
      });
    },
    /* 上移 */
    up(index) {
      if (this.list.length > 1 && index !== 0) {
        this.list = this.swapItems(this.list, index, index - 1);
      }
    },

    swapItems(arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
      return arr;
    },
    afterRead(file) {
      let params = new FormData(); //创建form对象
      params.append("file", file.file);
      upload(params)
        .then((res) => {
          res.data.forEach((item) => {
            this.list.push({
              CTCode: this.$route.query.ctCode,
              Url: item.FilePath,
              Remarks: "",
              Order: 0,
            });
            //this.imgs.push(item.FilePath);
          });
        })
        .catch((err) => {
          console.log("err", err);
        });
    },

    submit() {
      let params = [];

      this.list.map((item, index) => {
        params.push({
          Url: item.Url,
          Remarks: item.Remarks,
        });
        //   this.list[index].Order = index+1
      });

      savePhotos(params, this.filter).then(
        (res) => {
          this.$toast.success("操作成功！");
          setTimeout(() => {
            this.$router.goRefresh(-1);
          }, 500);
        }
      );

      //console.log('asdasd',this.list);
    },
  },
};
</script>

<style lang="less" scoped>
.all_dep {
  background-color: #ffffff;
}
.warn_item {
  margin: 10px;
  /*margin-bottom: 10px;*/
  // padding: 10px 0 10px 10px;
  border-radius: 5px;
  position: relative;
}
.warn_header {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 10px;
  .warn_tag {
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 26.64rem 0 0 26.64rem;
  }
}
.dep_sort {
  // display: flex;
  // flex-wrap: wrap;
  // margin-bottom: 5px;
  img {
    height: 15px;
    width: 15px;
    margin-right: 5px;
  }
}
.dep_btm {
  display: flex;
  justify-content: flex-end;
  .btm_item {
    display: flex;
    align-items: center;
    img {
      height: 15px;
      width: 15px;
      margin-right: 5px;
    }
  }
}

.bottom-btns {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  bottom: 20px;
  .submit-btn {
    width: 32%;
    height: 30px;
    font-size: 12px;
  }
  .delete-btn {
    width: 100%;
    height: 30px;
    font-size: 12px;
  }
}

.choose_btm {
  display: flex;
  width: 80%;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  background-color: #fff;

  .choose_confirm {
    width: 80%;
    height: 30px;
    font-size: 12px;
  }
}
</style>
